<template>
    <!-- 新增地址 -->
  <div class="address">
      <div class="back-nav-box">
          <back-nav left-arrow left-text='返回' title='新增地址' ></back-nav>
      </div>
      
        <!-- 我的详情盒子 -->
        <div class="my-box">
           <div class="order-address">
               <van-address-edit
                :area-list="areaList"
                show-postal
                show-set-default
                show-search-result
                save-button-text="保存按钮"
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave"
                @change-detail="onChangeDetail"
                />
            </div> 
            
        </div>
      <!--  -->
      
  </div>
</template>

<script>
import { Toast } from 'vant';
import BackNav from '../components/BackNav.vue';
// 编辑地址所用到的文件
import {areaList} from '@vant/area-data';
export default {
  name:'AddressAdd',
  components: { 
        BackNav,

    },
  data() {
    return {
        areaList,
        searchResult: [],
        addressInfo: {},
    };
  },
  methods: {
    // 新增地址接口
    addAddress() {
      this.axios({
        method: 'post',
        url: '/addAddress',
        data: {
          name: this.addressInfo.name,
          tel: this.addressInfo.tel ,
          province: this.addressInfo.province,
          city: this.addressInfo.city,
          county: this.addressInfo.county,
          addressDetail: this.addressInfo.addressDetail,
          areaCode: this.addressInfo.areaCode,
          postalCode: this.addressInfo.postalCode,
          isDefault: this.addressInfo.isDefault 
        }
      })
    },
      //组件 点击保存按钮触发
    onSave(content) {
      Toast('save');
      let addressInfo=this.addressInfo
      let idStr=Math.random().toFixed(2);
      content['id']=+idStr*100;
      //把地址改成列表中需要的收货地址
      for(let key in content) {
        addressInfo[key]=content[key];
        if(key=='province') {
          addressInfo['address']=addressInfo['province']+addressInfo['city']+addressInfo['county']+addressInfo['addressDetail'];
        }
      }    
      this.$store.commit('setAddress',content);
      this.$router.push({name:'AddressList'
      })
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
            this.searchResult = [
                {
                    name: '黄村地铁站',
                    address: '广州天河区',
                },
            ];
        }   else {
        this.searchResult = [];
            }
    },
  },
};

</script>

<style lang='less' scoped>
.address {
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: #f7f7f7;
    .back-nav-box {
    position:sticky;
    top:0;
    color:#00aadd; 
    }
    
    .my-box {
    margin: 15px 10px;
    background-color: rgba(255,255,255);
    border-radius: 10px;
    } 
    /deep/ .van-tag--danger{
        background-color: #00aadd;
    }
    /deep/ .van-button--danger {
        background-color: #00aadd;
        border:0.02667rem solid #00aadd;
    }
    /deep/ .van-radio__icon .van-icon {
        display:none;
    }
    /deep/ .van-address-item {
        border-bottom: 1px solid #e8e8e8;
    }
}
</style>